<template>
  <div>
    <el-row>
      <el-col :span="16" :offset="4">
        <!-- 收货地址 -->
        <el-row>
          <el-table
            :data="addressList"
            style="width: 100%">
            <el-table-column
              label="选择"
              width="80">
              <template slot-scope="scope">
                <el-radio v-model="aid" :label="scope.row.id"></el-radio>
              </template>
            </el-table-column>
            <el-table-column
              prop="accept"
              label="收货人"
              width="180">
            </el-table-column>
            <el-table-column
              prop="cellphome"
              label="手机号"
              width="180">
            </el-table-column>
            <el-table-column label="地址">
              <template slot-scope="scope">
                <span>{{scope.row.province + scope.row.city + scope.row.county + scope.row.detailaddress}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="180">
              <template slot-scope="scope">
                <el-button type="text" size="mini" v-if="scope.row.defaultaddr == 'n'">设为默认</el-button>
              </template>
              
            </el-table-column>
          </el-table>
        </el-row>

        <!-- 添加收货地址 -->
        <el-row>
          <el-col :span="3" :offset="21" style="text-align: right">
            <el-button type="primary" size="mini" @click="dialogVisible = true">添加收货地址</el-button>
          </el-col>

          <el-dialog
            title="新增收货地址"
            :visible.sync="dialogVisible"
            width="70%">
            <div>
              <Address @close="dialogVisible = false" @submit="submit"></Address>
            </div>
          </el-dialog>
        </el-row>
        <!-- 商品信息 -->
        <el-row>
          <el-table
            :data="carts"
            style="width: 100%">
            <el-table-column
              label="图片"
              width="100">
              <template slot-scope="scope">
                <img :src="$imgPrefix + scope.row.image" alt="" width="80px" height="80px">
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="商品名"
              width="340">
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格">
            </el-table-column>
            <el-table-column
              prop="num"
              label="数量">
            </el-table-column>
            <el-table-column
              label="小计"
              width="100">
              <template slot-scope="scope">
                <span>{{(scope.row.price * scope.row.num).toFixed(2) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <!-- 下单 -->
        <el-row>
          <el-col :span="10" :offset="14" style="text-align: right">
            <span>总价：{{getTotal()}}</span>
            <el-button type="danger" @click="makeOrder">确认无误，立即下单</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Address from './commons/address.vue'
export default{
  data(){
    return{
      carts: JSON.parse(sessionStorage.getItem("carts")),
      addressList: [],
      aid: 1,
      dialogVisible: false,
      cids: []
    }
  },
  components:{
    Address
  },
  mounted(){
    this.$axios.get("/address/findByUid").then(res => {
      this.addressList = res.data.data
      // 找到默认的收货地址
      for (const addr of this.addressList) {
        if(addr.defaultaddr == 'y'){
          this.aid = addr.id
          break
        }
      }
    })
  },
  methods:{
    submit(address){
      // 关闭提示框、提交数据到后台插入数据库、页面还需要多一条地址信息
      console.log(address)
      this.dialogVisible = false
      //
      this.$axios.post("/address/add", address).then(res => {
        console.log(res.data)
        //
        address.id = res.data.data
        address.defaultaddr = 'n'
        // 
        this.addressList.push(address)
      })
    },
    getTotal(){
      let total = 0
      let cids = []
      for (const cart of this.carts) {
        total = total + cart.price * cart.num
        cids.push(cart.id)
      }
      this.cids = cids
      return total
    },
    makeOrder(){
      // 获取地址id、购物车id
      let data = {
        aid: this.aid,
        cids: this.cids
      }
      console.log(data)
      //
      this.$axios.post("/order/make", data).then(res=>{
        if(res.data.code == 200){
          // 先删除sessionstorage中的购物车信息
          sessionStorage.removeItem("carts")
          // 跳转到支付页面，展示订单信息
          sessionStorage.setItem("order",JSON.stringify(res.data.data))
          //
          this.$router.push("/pay")
        }
      })
    }
  }
}
</script>

<style scoped>

</style>